<template>
  <div class="home">
    <header-nav />
    <search-bar />
    <section-title sectionName="歌曲推荐" />
    <recommend-music :recommendLists="recommendMusicData" />
    <section-title sectionName="热门歌单" />
    <song-menu :hotMusicLists="hotMusicData" />
    <section-title sectionName="推荐小程序" :showMore="false" />
    <small-routine />
    <section-title sectionName="官方歌单" />
    <song-menu :officialMusicLists="officialMusicData" />
    <section-title sectionName="巅峰榜" :showMore="false" />
    <ranking-list :peakMusicLists="peakMusicData" />
  </div>
</template>

<script>
import HeaderNav from "@/components/common/HeaderNav.vue";
import SearchBar from "@/components/music/SearchBar.vue";
import SectionTitle from "@/components/common/SectionTitle.vue";
import RecommendMusic from "@/components/music/RecommendMusic.vue";
import SongMenu from "@/components/music/SongMenu.vue";
import SmallRoutine from "@/components/music/SmallRoutine.vue";
import RankingList from "@/components/music/RankingList.vue";

import {
  recommendMusic,
  hotMusic,
  officialMusic,
  peakMusic,
} from "@/network/api/music";

export default {
  name: "HomeView",
  components: {
    HeaderNav,
    SearchBar,
    SectionTitle,
    RecommendMusic,
    SongMenu,
    SmallRoutine,
    RankingList,
  },
  data() {
    return {
      recommendMusicData: [],
      hotMusicData: [],
      officialMusicData: [],
      peakMusicData: [],
    };
  },
  created() {
    this.getRecommendMusic();
    this.getHotList();
    this.getOfficialMusic();
    this.getPeakMusic();
  },
  methods: {
    getRecommendMusic() {
      recommendMusic("/personalized/newsong", { limit: 3 }).then((res) => {
        if (res.code === 200) {
          this.recommendMusicData = res.result;
        }
      });
    },
    getHotList() {
      hotMusic("/personalized", {}).then((res) => {
        if (res.code === 200) {
          this.hotMusicData = res.result;
        }
      });
    },
    getOfficialMusic() {
      officialMusic("/top/playlist/highquality", {}).then((res) => {
        if (res.code === 200) {
          this.officialMusicData = res.playlists;
        }
      });
    },
    getPeakMusic() {
      peakMusic("/toplist/detail", {}).then((res) => {
        if (res.code === 200) {
          this.peakMusicData = res.list.slice(0, 4);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>
